<template>
  <el-container style="height:100%" class="bigbox">
    <i class="el-icon el-icon-arrow-right" v-show="show3" @click="showCont"></i>
    <i class="el-icon el-icon-arrow-left" v-show="show2" @click="showCont"></i>
    <el-aside v-show="show" style="height:100%;width:340px" class="sidebar">
      <user-information :systemName="systemName"></user-information>
      <el-collapse v-model="activeName" accordion class="box" @change="pc">
        <div class="lamp">
          <el-collapse-item title="智慧路灯管理系统" name="1" class="hed dian lamp">
            <div class="items">
              <div class="ison">
                <div class="search">
                  <div class="lampchoose">
                    <el-select
                      v-model="equipmentChoice"
                      placeholder="请选择设备"
                      :popper-append-to-body="false"
                    >
                      <el-option
                        v-for="item in EquipmentSelection"
                        :key="item.name"
                        :label="item.name"
                        :value="item.devType"
                        @click.native="equipmentSwitch(item.name)"
                      ></el-option>
                    </el-select>
                  </div>
                  <div class="sidebar_search">
                    <el-input
                      v-show="nesting"
                      placeholder="请输入内容"
                      prefix-icon="el-icon-search"
                      v-model="group_search"
                      @blur="Search_value"
                      @keyup.enter="Search_value"
                    ></el-input>
                  </div>
                </div>
                <div class="result">
                  <ul class="group lamp_group">
                    <li
                      v-for="(item,index) in equipment"
                      :key="index"
                      @click="groupID(item.id,index)"
                      :class="activeClass == index ? 'active':''"
                    >{{item.name}}</li>
                  </ul>
                </div>
              </div>
            </div>
          </el-collapse-item>
        </div>
        <div class="dian lamp">
          <el-collapse-item title="夜景照明管理系统" name="2" class="hed" @change="pc">
            <div class="items">
              <div class="ison">
                <div class="search">
                  <div class="sidebar_search">
                    <el-input
                      @keyup.enter="Search_value"
                      placeholder="请输入内容"
                      prefix-icon="el-icon-search"
                      v-model="group_search"
                      @blur="Search_value"
                    ></el-input>
                  </div>
                  <ul class="group">
                    <li
                      v-for="(item,index) in equipment"
                      :key="index"
                      @click="groupID(item.id,index)"
                      :class="activeClass == index ? 'active':''"
                    >{{item.name}}</li>
                  </ul>
                </div>
              </div>
            </div>
          </el-collapse-item>
        </div>

        <el-collapse-item title="广播对讲系统" name="8" class="hed lamp">
          <div class="items">
            <div class="ison">
              <div class="search">
                <div class="lampchoose">
                  <selects @changeImctype="changeImctype" />
                </div>
                <div class="sidebar_search">
                  <el-input
                    v-show="nesting"
                    placeholder="请输入内容"
                    prefix-icon="el-icon-search"
                    v-model="group_search"
                    @blur="Search_value"
                    @keyup.enter="Search_value"
                  ></el-input>
                </div>
              </div>
              <div class="result">
                <ul class="group lamp_group">
                  <li
                    v-for="(item,index) in equipment"
                    :key="index"
                    @click="groupID(item.id,index)"
                    :class="activeClass == index ? 'active':''"
                  >{{item.name}}</li>
                </ul>
              </div>
            </div>

          </div>
        </el-collapse-item>
    

        <!-- <div class="videoanalysis" v-for="(item,index) in videoList" :key="index" v-show="item.show">
        <div class="video" @click="jump2(item.path)">{{item.name}}</div>-->
        <!-- <el-collapse-item :title="智能视频分析系统" name="3" class="hed"></el-collapse-item> -->
        <!-- </div> -->
      </el-collapse>
    </el-aside>
    <el-container class="minW">
      <el-main class="mian">
        <TItleHead :Crumbs="Crumbs"></TItleHead>
        <router-view ref="page"></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import ht from "../ht.js";
import TItleHead from "./title";
import selects from "../components/select";
import { mapActions } from "vuex";
import { mapState } from "vuex";
import { mapMutations } from "vuex";
import { mapGetters } from "vuex";
import userInformation from "../components/UserInformation";
export default {
  props: ["systemName"],
  components: {
    userInformation,
    TItleHead,
    selects,
  },
  data() {
    return {
      Crumbs: {
        router: [
          {
            value: "主控",
            path: "/distribution",
          },
          {
            value: "运行策略",
            path: "/BoxStrategy",
          },
        ],
        path: [],
      },
      activeClass: null,
      s: {},
      show: true,
      show2: true,
      show3: false,
      activeName: "",
      sosuojg: "",
      hideName: "1",
      hideName1: "1",
      dtxz: "",
      tableData: [],
      data: [],
      data1: [],
      defaultProps: {
        children: "lamp",
        label: "sensorName",
      },
      EquipmentSelection: [
        {
          name: "单灯控制器",
          devType: "1",
        },
        {
          name: "气象传感器",
          devType: "2",
        },
        {
          name: "显示屏",
          devType: "3",
        },
        {
          name: "WIFI-AP节点",
          devType: "4",
        },
        {
          name: "摄像头",
          devType: "5",
        },
      ],
      equipmentChoice: "1",
      userID: "",
      forgroup: {
        userId: "",
        id: "",
        area: "",
        sensor: "",
        type: "",
        category: "",
        page: "",
        size: "",
      },
      data6: [],
      List: [], //配电箱组
      group_search: "", //配电箱输入框
      group_id: "", //电箱的组id
      PersonalInformation: "", //个人信息
      imcType: 0,
      nesting: true,
    };
  },
  computed: {
    ...mapState("boxList", ["equipment"]),
  },
  watch: {
    imcType(a) {
      this.grouplist([this.group_search, this.imcType]);
      if (a == 8) {
        this.delRouter("实时广播");
        this.Crumbs.router.push({
          value: "实时广播",
          path: "/RadioIntercom",
        });
      } else {
        this.delRouter("实时广播");
      }
      if (a == 5) {
        this.Crumbs.router.push({
          value: "视频",
          path: "/video",
        });
      } else {
        this.delRouter("视频");
      }
    },
    $route(item) {
      if (item.path == "/BoxStrategy") {
        this.Crumbs.path = [];
      } else {
        this.Crumbs.path = [];
      }
    },
  },
  methods: {
    ...mapActions("boxList", ["grouplist", "loopList", "loopList2"]),
    ...mapMutations("boxList", [
      "PacketLoop",
      "del_search",
      "Distinguish",
      "mount",
    ]),
    ...mapActions("intercom", ["IntercomInfo"]),
    ...mapMutations("intercom", ["groupId"]),

    delRouter(str) {
      this.Crumbs.router.forEach((item, index) => {
        if (item.value == str) {
          this.Crumbs.router.splice(index, 1);
        }
      });
    },
    changeImctype(e) {
      this.activeClass = -1;
      this.imcType = e;
    },

    pc(e) {
      this.activeClass = -1;
      this.equipmentChoice = "1";
       if (this.$route.path !== "/BoxStrategy") {
        this.$router.push("/distribution");
      }
      if (this.$refs.page.console) {
        this.$refs.page.console();
      }
   
      this.imcType = e;
      this.Crumbs = {
        router: [
          {
            value: "主控",
            path: "/distribution",
          },
          {
            value: "运行策略",
            path: "/BoxStrategy",
          },
        ],
        path: [],
      };
      if (this.group_search) {
        this.group_search = null;
        this.grouplist([this.group_search, this.imcType]);
      }
      if (e == 1) {
        this.nesting = true;
        this.imcType = 1;
        this.Distinguish(this.imcType);
      } else if (e == 2) {
        this.imcType = 0;
        this.Distinguish(this.imcType);
      } else {
        this.Distinguish("广播对讲系统");
      }
    },
    id() {
      // 判断在页面是否显示标签
      this.userID = sessionStorage.getItem("id");
    },
    showCont() {
      // 如果不使用异步每一次点击获取的都是上次的宽高
      setTimeout(() => {
        this.$refs.page.resize();
      }, 0);
      this.show = !this.show;
      this.show2 = !this.show2;
      this.show3 = !this.show3;
    },

    jump2(path,index) {
      this.Crumbs = {
        router: {},
        path: [],
      };
      // this.activeName = "";
      this.activeClass=index
      this.$router.push(path);
    },
    equipmentSwitch(e) {
      this.group_search = "";
      this.activeClass = null;
      switch (e) {
        case "单灯控制器":
          this.imcType = 1;
          this.$router.push("/distribution");
          this.nesting = true;
          break;
        case "气象传感器":
          this.imcType = 2;
          this.Crumbs.path = [];
          this.nesting = true;
          break;
        case "显示屏":
          this.Crumbs.path = [];
          this.imcType = 3;
          break;
        case "WIFI-AP节点":
          this.Crumbs.path = [];
          this.imcType = 4;
          break;
        case "摄像头":
          this.Crumbs.path = [];
          this.imcType = 5;
          break;
      }
      this.Distinguish(e);
    },
    // 配电箱当数据发生变化的时候去请求搜索
    Search_value() {
      if (this.group_search) {
        this.activeClass = null;
        this.grouplist([this.group_search, this.imcType]);
      }
    },
    // 点击获取到组的id
    groupID(id, index) {
      if (this.imcType >= 8) {
        this.IntercomInfo(id);
      }
      // 关闭策略详情
      if (this.$refs.page.Close) {
        this.$refs.page.Close();
      }
      clearInterval(window.timer);
      this.mount(this.activeName);
      if (this.activeName == 2) {
        this.Crumbs.path = [];
      } else {
        this.Crumbs.path = [];
      }
      if (this.$route.path == "/distribution") {
        this.$refs.page.setpage();
      }
      this.del_search();
      this.activeClass = index;
      this.group_id = id;
      this.PacketLoop([id, this.imcType]);
      this.loopList();
      this.loopList2();
      if (this.$route.path == "/distribution") {
        window.timer = setInterval(() => {
          if (this.$route.path == "/distribution") {
            this.$refs.page.setpage();
          }
          this.loopList();
          this.loopList2();
        }, 300000);
      }
    },
    PersonalDetails() {
      this.$router.push("/setUser");
    },
  },
  destroyed() {
    if (window.timer) {
      //如果定时器在运行则关闭
      clearInterval(window.timer);
      // this.group_id=''
    }
  },
  mounted() {
    if (this.$route.path == "/LntelligentAnalysis") {
      this.Crumbs = {
        router: {},
        path: [],
      };
    }
    if (this.$route.path == "/video") {
      this.delRouter("视频");
      this.Crumbs.router.push({
        value: "视频",
        path: "/video",
      });
    }

    if (this.$route.path == "/RadioIntercom") {
      this.delRouter("实时广播");
      this.Crumbs.router.push({
        value: "实时广播",
        path: "/RadioIntercom",
      });
    }
    this.id();
    // 如果不传值 vuex那里拿到的是undifinde
    this.grouplist([this.group_search, this.imcType]);
  },
};
</script>
<style scoped>
.bigbox .el-icon {
  position: absolute;
  top: 49%;
  left: 10px;
  z-index: 9;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.3);
}
.sidebar {
  padding-top: 40px;
}
/deep/ .sele .el-collapse-item__arrow {
  float: left;
  line-height: 30px;
}
.box {
  margin: 30px 14.7% 0 14.7%;
}
.sidebar .videoanalysis {
  position: relative;
  width: 100%;
  height: 40px;
  margin-bottom: 20px;
  line-height: 40px;
  border-radius: 10px;
  overflow: hidden;
}
.sidebar .video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: RGBA(9, 218, 186, 230);
  z-index: 9;
  font-size: 16px;
  text-align: center;
  color: #fff;
  cursor: pointer;
}
/deep/ .box .lamp .hed > .el-collapse-item__header > .el-collapse-item__arrow {
  float: left;
  line-height: 40px;
  text-align: center;
}
/deep/ .box .hed .el-collapse-item__header > .el-collapse-item__arrow {
  line-height: 40px;
}
/deep/ .el-collapse-item__wrap {
  background-color: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid RGB(0, 68, 148);
  z-index: 5;
}
/deep/ .box .hed .el-collapse-item__header {
  background-color: RGBA(9, 218, 186, 230);
  height: 40px;
  line-height: 40px;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  padding-left: 22%;

  font-size: 16px;
  text-align: center;
  font-weight: 500;
  margin-bottom: 20px;
  border: none;
}
.el-header {
  color: #333;
  overflow: hidden;
}
.mian {
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: url("../assets/image/strategy_add.jpg");
}
.el-main {
  background-color: #fff;
}
.el-header div {
  float: left;
  width: 10%;
  height: 100%;
  line-height: 40px;
  text-align: center;
  color: #fff;
}
.bigbox .el-aside .search {
  position: relative;
  width: 100%;
  border-radius: 3%;
}
.lampchoose {
  margin: 12px auto;
  width: 210px;
  height: 36px;
}
/deep/ .box .el-collapse-item__content {
  padding-bottom: 0;
}
.bigbox .el-aside .search .lampchoose .spinner > .el-collapse-item__wrap {
  margin: 0;
}
.router-link-exact-active {
  background-color: #5a8fce;
}
.bigbox .el-aside .sidebar_search {
  position: relative;
}
.bigbox .el-aside .search .el-input {
  width: 88%;
  margin-left: 4.9%;
  margin-top: 5%;
}

/deep/ .el-input__inner {
  display: inline-block;
  background: RGB(0, 0, 0, 0.2);
  color: #fff;
}
.bigbox .el-aside .niu {
  margin-top: 3%;
}
.bigbox .el-aside {
  background: url("../assets/image/sidebar.jpg");
  color: #333;
}
.bigbox .el-aside .result {
  width: 100%;
  height: 280px;
  margin: 16px 0 0 0;
  border-radius: 3%;
  overflow: hidden;
}
.bigbox .el-aside .trees {
  z-index: 0;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.router-link-exact-active {
  background-color: rgba(0, 0, 0, 0.4);
}
.el-collapse {
  border: none;
}
.group {
  width: 290px;
  height: 347px;
  padding-top: 20px;
  color: #fff;
  overflow-y: scroll;
}
.group li {
  width: 240px;
  height: 30px;
  line-height: 30px;
  margin-bottom: 10px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
}
.group :hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.2);
}
.group .active {
  background: RGBA(9, 218, 186, 230);
}
.set {
  position: absolute;
  z-index: 5;
  top: 0;
}
.minW {
  height: 100%;
  /* background: url("../assets/image/strategy_add.jpg"); */
  min-width: 1300px;
}
.lamp_group {
  padding-top: 5px;
}
/deep/ .el-select-dropdown {
  background: #0a7e7e;
  color: #fff;
  border: none;
}
/deep/ .el-select-dropdown__item {
  color: #fff;
  background: #0a7e7e;
}
/deep/ .el-scrollbar__view /deep/ .selected {
  background: #28bbac;
}
/deep/ .hover {
  background: #28bbac;
}
</style>
